<!DOCTYPE html>
<html>
<head>
	<title>vue_pratice1</title>
	<meta charset="utf-8">
	<script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
	<script type="text/javascript" src="js/vue.js"></script>
	<style type="text/css">
		
	</style>
</head>
<body>
<div id = "app">
	<input type="text" name="con" v-model="inputValue">
	<button v-on:click="handleBtnClick">提交</button>
	<ul>
		<todo-item  v-bind:content="item" v-for="item in list"></todo-item>
	</ul>
	
</div>
</body>
<script type="text/javascript">

	//全局组件
	// Vue.component("todo-item",{
	// 	props:["content"],
	// 	template:"<li>{{content}}</li>"
	// })


	//局部组件


	var TodoItem = {
		props:["content"],  //外部传递来的数据，采用数组的形式
		template:"<li>{{content}}</li>"
	}




	var app = new Vue ({

		el:"#app",
		components:{
			TodoItem:TodoItem    //采用键值对的形式
		},
		data:{
			list:[],
			inputValue:''
			
			},
		methods:{
			handleBtnClick:function() {
				this.list.push(this.inputValue);
				this.inputValue = null;
			}
		}
		

	
	})
</script>
</html>